<template>
  <!-- HTML结构,要求 template里面,有且只有一个跟标签-->
  <div>
    <h2>这是根组件</h2>
    <!-- 插值表达式,也叫做大胡子,小胡子语法 -->
    <p>姓名: {{ uname.toUpperCase() + "你好" }}</p>
    <p>年龄:{{ age }}</p>
    <p>{{ flag ? "111" : "222" }}</p>
    <!-- 标签的 v-html属性,相当于innerHTML的意思,会解析内容中的标签 -->
    <p v-html="info">简介:</p>
    <!-- 标签的 v-text属性,相当于innerTEXT的意思,不会解析内容中的标签-->
    <p v-text="uname"></p>
  </div>
</template>

<script>
// javascript
export default {
  //对象里边可以写很多东西,比如data,methods,computed,watch,components
  //data用于存储数据:写法上要求data定义成函数,函数里边返回一个对象,所有的数据都放到这个返回的对象中
  data() {
    return {
      //页面中用到的数据都放在这里
      uname: "lisi",
      age: 30,
      flag: true,
      info: "这是一个非常<strong>优秀</strong>的boy",
    };
  },
};
</script>

<style scoped>
/* css样式 */
</style>

